<template>
  <div class="consume-table-page">
    <el-table
      :data="tableList"
      style="width: 100%"
      stripe
      border
      header-cell-class-name="header-cell-class-name"
    >
      <el-table-column
        prop="number"
        label="编号"
        align="center"
      >
        <template slot-scope="scope">
          <div>{{ pageSize*(currentPage-1)+ scope.$index+1 }}</div>
        </template>
      </el-table-column>
      <el-table-column v-if="userInfo.role==1||userInfo.role==4" prop="account" label="用户名" align="center"></el-table-column>
      <el-table-column prop="word" label="关键词" align="center">
      </el-table-column>
      <el-table-column
        prop="rank"
        label="排行"
        align="center"
      ></el-table-column>
      <el-table-column prop="category" label="类别" align="center">
        <template slot-scope="{ row }">
          {{row.kind==1?"服务":"企业"}}
        </template>
      </el-table-column>
      <el-table-column prop="payAmount" label="消费金额" align="center">
        <template slot-scope="{ row }">
          <div>￥{{ (row.payAmount*0.01).toFixed(2) }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="时间"
        align="center"
      >
        <template slot-scope="{ row }">
          <div>{{ dateFormat("YYYY mm-dd HH:MM:SS", new Date(Number(row.createTime))) }}</div>
        </template>
      </el-table-column>
      <!--<el-table-column prop="balance" label="余额" align="center">-->
        <!--<template slot-scope="{ row }">-->
          <!--<div>￥{{ row.balance }}</div>-->
        <!--</template>-->
      <!--</el-table-column>-->
    </el-table>
    <div class="pagination-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100]"
        :page-size="20"
        :total="total"
        layout=" prev, pager, next,sizes,jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {dateFormatCC} from "../../../utils/tools"
import {trace} from "../../../utils/trace"
import {mapGetters} from "vuex"

export default {
  components: {},
  props: {},
  data() {
    return {
      dateFormat:dateFormatCC,
      currentPage: 1,
      pageSize: 20,
      total: 400,
      tableList: [
        {
          number: "00001",
          keys: "SEO",
          sort: "13",
          category: "服务",
          payAmount: "10000",
          createTime: "2017-10-31 23:12:00",
          balance: "300"
        }
      ],
      orderStatus: {
        1: "支付成功",
        2: "支付失败"
      },
      tagStatus: {
        1: "success",
        2: "danger"
      }
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    handleSizeChange(value) {
      this.pageSize = value;
      this.currentPage = 1;
      this.queryOrder();
    },
    handleCurrentChange(value) {
      this.currentPage = value;
      this.queryOrder();
    },
    queryOrder:function () {
      // 消费记录
      let page=this.currentPage;
      let count = this.pageSize;
      let kind = 8789324728947;
      this.$store.dispatch('finance/seoQuery', {page,count}).then((data) => {

        this.tableList = data.data;
        this.total = data.total;
      }).catch((err) => {

      })
    }
  },
  created() {this.queryOrder();},
  mounted() {}
};
</script>
<style lang="scss" scoped>
::v-deep .header-cell-class-name {
  background: #ecf0f3;
}
.pagination-box {
  margin: 15px 0;
  text-align: right;
}
</style>
